<script setup lang="ts">
import * as THREE from 'three';
import { ref, onMounted } from 'vue';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// 初始化场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
// camera.position.z = 30;

// 相机放入到场景中
camera.position.set(0, 0, 0.01);

const useBox = () => { 
  const materials: THREE.MeshBasicMaterial[] = [];

  const texture_right = new THREE.TextureLoader().load('./images/livingRoom/living_r.jpg');
  materials.push(new THREE.MeshBasicMaterial({ map: texture_right }));

  const texture_left = new THREE.TextureLoader().load('./images/livingRoom/living_l.jpg');
  materials.push(new THREE.MeshBasicMaterial({ map: texture_left }));

  const texture_up = new THREE.TextureLoader().load('./images/livingRoom/living_u.jpg');
  materials.push(new THREE.MeshBasicMaterial({ map: texture_up }));

  const texture_down = new THREE.TextureLoader().load('./images/livingRoom/living_d.jpg');
  materials.push(new THREE.MeshBasicMaterial({ map: texture_down }));

  const texture_front = new THREE.TextureLoader().load('./images/livingRoom/living_f.jpg');
  materials.push(new THREE.MeshBasicMaterial({ map: texture_front }));

  const texture_back = new THREE.TextureLoader().load('./images/livingRoom/living_b.jpg');
  materials.push(new THREE.MeshBasicMaterial({ map: texture_back }));

  // 创建几何体
  const geometry = new THREE.BoxGeometry(10, 10, 10);
  // 创建材质
  // const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  // 创建网格
  const box = new THREE.Mesh(geometry, materials);
  box.geometry.scale(1, 1, -1);
  // 将网格添加到场景中
  scene.add(box);
}

const useSphere = () => { 
  const sphereGeometry = new THREE.SphereGeometry(1, 50, 50);
  sphereGeometry.scale(1, 1, -1);
  const texture = new THREE.TextureLoader().load('./images/scene.jpeg');
  const sphereMaterial = new THREE.MeshBasicMaterial({ map: texture });

  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
  scene.add(sphere);
}

// useBox();
useSphere();

window.addEventListener('resize', () => { 
  // 更新相机的宽高比
  camera.aspect = window.innerWidth / window.innerHeight;
  // 更新相机的投影矩阵
  camera.updateProjectionMatrix();
  // 更新渲染器的大小
  renderer.setSize(window.innerWidth, window.innerHeight);
})

// const materials: THREE.MeshBasicMaterial[] = [];

// const texture_right = new THREE.TextureLoader().load('./images/livingRoom/living_r.jpg');
// materials.push(new THREE.MeshBasicMaterial({ map: texture_right }));

// const texture_left = new THREE.TextureLoader().load('./images/livingRoom/living_l.jpg');
// materials.push(new THREE.MeshBasicMaterial({ map: texture_left }));

// const texture_up = new THREE.TextureLoader().load('./images/livingRoom/living_u.jpg');
// materials.push(new THREE.MeshBasicMaterial({ map: texture_up }));

// const texture_down = new THREE.TextureLoader().load('./images/livingRoom/living_d.jpg');
// materials.push(new THREE.MeshBasicMaterial({ map: texture_down }));

// const texture_front = new THREE.TextureLoader().load('./images/livingRoom/living_f.jpg');
// materials.push(new THREE.MeshBasicMaterial({ map: texture_front }));

// const texture_back = new THREE.TextureLoader().load('./images/livingRoom/living_b.jpg');
// materials.push(new THREE.MeshBasicMaterial({ map: texture_back }));

// // 创建几何体
// const geometry = new THREE.BoxGeometry(10, 10, 10);
// // 创建材质
// // const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// // 创建网格
// const box = new THREE.Mesh(geometry, materials);
// box.geometry.scale(1, 1, -1);
// // 将网格添加到场景中
// scene.add(box);



// 轨道控制器对象
let controls: OrbitControls;
// 坐标辅助器
const axesHelper = new THREE.AxesHelper(20);
scene.add(axesHelper);


// 创建渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染器大小
renderer.setSize(window.innerWidth, window.innerHeight);

const container = ref<HTMLElement | null>(null);



const render = () => { 
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

onMounted(() => { 
  if (container.value) { 
    // 添加轨道控制器
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.update();

    container.value.appendChild(renderer.domElement);
    render();
  }
})
</script>

<template>
  <div ref="container" class="container"></div>
</template>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100vw;
  height: 100vh;
}
</style>
